import React from "react";
import Head from "next/head";
import { css } from "@emotion/core";
import styled from "@emotion/styled";
import { Carousel } from "react-responsive-carousel";
import { Heading, Text, Button, Box } from "@chakra-ui/react";
import axios from "axios";
import { baseUrl } from "../axiosConfig";
import Link from "next/link";

const swiperContainer = css`
  position: relative;
  & > .carousel:last-child {
    position: absolute;
    left: 0;
    bottom: 0;
    & > .thumbs-wrapper > .thumbs {
      display: flex;
      justify-content: center;
      & > li:hover {
        border-color: #fff;
      }
      & > li {
        border-color: #aaa;
      }
      & > .selected {
        border-color: #fff;
      }
    }
  }
`;

const CarouselItem = styled.div`
  position: relative;
  & > div {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    color: #fff;
    padding-top: 180px;
    text-align: left;
    width: 100%;
    max-width: 1200px;
    & > p {
      margin: 10px 0;
      font-size: 14px;
      width: 450px;
    }
  }
  & > img {
    filter: brightness(50%);
  }
`;

export default function Swiper({ data }) {
  return (
    <>
      <Head>
        <link rel="stylesheet" href="/css/carousel.min.css" />
      </Head>
      <Carousel
        css={swiperContainer}
        showArrows={false}
        showIndicators={false}
        showStatus={false}
        autoPlay={true}
        infiniteLoop={true}
        stopOnHover={true}
        interval={1500}
      >
        {data.map((swiper) => (
          <CarouselItem key={swiper.id}>
            <img src={swiper.url} />
            <Box>
              <Heading as="h2" size="lg">
                {swiper.title}
              </Heading>
              <Text>{swiper.description}</Text>
              <Button colorScheme="red">
                <Link href="/detail/[id]" as={`/detail/${swiper.vid}`}>
                  <a>CHECK DETAIL</a>
                </Link>
              </Button>
            </Box>
          </CarouselItem>
        ))}
      </Carousel>
    </>
  );
}

export async function loadSwiper() {
  return axios.get("/api/swiper", {
    baseURL: baseUrl,
  });
}
